<template>
	<view class="full-wrap">
		<view id="map">
		</view>
		<view class="now-pos" @tap="searchPos(posCity)">
			定位城市：{{posCity}}
		</view>
		<view class="choose-city flex-box">
			<view class="city-item flex-box">
				<text class="city flex-box" @tap="chooseCity">{{nowCity}}</text>
				<image src="../../static/down.png" class="down-ico"></image>
			</view>
			<view class="search-box">
				<input placeholder="搜索地点" type="text" name="input" @input="searchPos(nowCity)" style="width: 100% ;" v-model="searchText"></input>
			</view>
		</view>
		<view class="search-result-wrap">
			<view class="cu-item padding" :key="index" v-for="(item,index) in cityList" @click="chooseHandle(item)">
				<view class="search-result-content">
					<text class="list-city-name">{{item.name}}</text>
					<text class="list-city-address text-gray">{{item.city+item.address}}</text>
				</view>
			</view>
		</view>
		<!-- 城市选择 该插件从插件市场下载 -->
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @="" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import cityData from '../../commonjs/city.data.js'
	import mpvuePicker from '../../components/mpvue-picker/mpvuePicker.vue'
	export default {
		components: {
			mpvuePicker
		},
		data() {
			return {
				lat: " 39.915",
				lng: '116.404',
				posCity: "",
				nowCity: '',
				searchText: "",
				cityList: [],
				pickerValueDefault: [0, 0],
				themeColor: '#007AFF',
				mode: 'multiLinkageSelector',
				deepLength: 2,
				pickerValueArray: cityData
			}
		},
		mounted() {
			// 默认以当前位置为中心
			uni.getLocation({
				geocode: 'true',
				success: res => {
					this.posCity = res.address.city;
					this.nowCity = res.address.city;
					this.lat = res.latitude;
					this.lng = res.longitude;
					this.searchPos(res.address.city);
				}
			});
		},
		methods: {
			searchPos(cityName) {
				let map = this.$refs.map;
				let searchObj = new plus.maps.Search(map);
				searchObj.onPoiSearchComplete = (state, result)=> {
					if (state == 0) {
						if (result.currentNumber <= 0) {
							uni.showToast({
								title: '没有检索到结果',
								icon: 'none'
							});
						}
						this.cityList = [];
						for (let i = 0; i < result.currentNumber; i++) {
							let pos = result.getPosition(i);
							this.cityList.push(pos);
						}
					} else {
						uni.showToast({
							title: '检索失败',
							icon: 'none'
						});
					}
				}
				let pt = new plus.maps.Point(this.lng, this.lat);
				// 默认搜索火车站
				let nowPosCIty = this.searchText ? this.searchText : '火车站';
				searchObj.poiSearchInCity(cityName, nowPosCIty);
			},
			chooseCity() {
				this.$refs.mpvuePicker.show();
			},
			onCancel(e) {
				console.log(e);
			},
			onConfirm(e) {
				let pickerText = e.label.split('-');
				this.searchPos(pickerText[1])
			},
			chooseHandle(e) {
				console.log('选择地点的地点信息：');
				console.log(e);
			}
		}
	}
</script>

<style scoped>
	#map1 {
		height: 0;
	}
	.flex-box {
		display: flex;
	}
.now-pos {
	font-size: 30upx;
	padding: 25upx;
}
	.choose-city {
		background-color: #FFFFFF;
		border-bottom: 0.5px solid #ddd;
	}

	.city-item {
		width: 160upx;
		color: grey;
		padding: 20upx 15upx;
		margin-left: 15upx;
		border-right: 0.5px solid #ddd;
		border-radius: 5upx;
	}

	.city {
		font-size: 30upx;
		margin-top: 8upx;
	}
.down-ico {
	width: 30upx;
	height: 30upx;
	position: relative;
	top:16upx;
}
	.search-result-wrap {
		padding: 10upx;
	}

	.search-result-content {
		display: flex;
		flex-direction: column;
		padding: 10upx;
		border-bottom: 0.5px solid #ddd;
	}

	.search-box {
		font-size: 30upx;
		width: 550upx;
		padding: 20upx 15upx;
		background-color: #FFFFFF;
	}

	.list-city-name {
		font-size: 32upx;
		margin-bottom: 0;
		padding: 0;
	}

	.list-city-address {
		font-size: 24upx;
		color: gray;
		margin-top: 0;
	}
</style>
